// function page(total, cur, around) {
//     var result = [];
//     var baseCount = around * 2 + 1 + 2 + 2 + 2;
//     var superlus = baseCount - 4;
//     var startEllipsis = 1 + around + 2 + 1;
//     var endEllipsis = total - 2 - around - 1;
//     if (total <= baseCount - 2) {
//         for (var i = 0; i < total; i++) {
//             result.push(i + 1);
//         }
//     } else {
//         if (cur < startEllipsis) {
//             for (var i = 0; i < superlus; i++) {
//                 result.push(i + 1);
//             }
//             result.push("...", total);
//         } else if (cur > endEllipsis) {
//             for (var i = 0; i < superlus; i++) {
//                 result.push(i + endEllipsis - 1);
//             }
//             result.reverse().push("...", 1);
//             result.reverse();
//         } else {
//             for (var i = 0; i < around * 2 + 1; i++) {
//                 result.push(i + cur - around);
//             }
//             result.reverse().push("...", 1);
//             result.reverse().push("...", total);
//         }
//     }
//     return result;
// }
// page(7,2,2);
// page(20,3,2);
// page(20,10,2);
// page(20,19,2);

function Paging(config, cur) {
    this.config = parseInt(config);
    this.cur = parseInt(cur);
    this.container = document.createElement('div');
    this.apply();
}

Paging.prototype = {
    constructor: Paging,
    apply: function () {
        this.container.className = 'big';
        this.container.style.width = '600px';
        this.container.style.height = '60px';
        this.container.style.position = 'relative';
        this.container.style.margin = '20px';
        this.pagingUl = document.createElement('ul');
        if (this.config <= 9) {
            for (var i = 0; i < this.config + 4; i++) {
                this.apply_log();
                this.pagingLi.innerHTML = '<span>' + (i) + '</span>';
                if (i === this.cur) {
                    this.pagingLi.style.color = 'green';
                    this.pagingLi.style.border = '1px solid green'
                }
                if (i === 0) {
                    this.pagingLi.style.width = '60px';
                    this.pagingLi.innerHTML = '<span>' + '上一页' + '</span>';
                } else if (i === this.config + 3) {
                    this.pagingLi.style.width = '60px';
                    this.pagingLi.innerHTML = '<span>' + '下一页' + '</span>';
                }
                if(i === 1)
                {
                    this.pagingLi.style.width = '20px';
                    // this.pagingLi.innerHTML = '<span>' + '...' + '</span>';
                    // this.pagingLi.style.border = '0';
                } else  if( i === this.config +2)
                {
                    this.pagingLi.style.width = '20px';
                    this.pagingLi.innerHTML = '<span>' + '...' + '</span>';
                    this.pagingLi.style.border = '0';
                }
                this.pagingUl.appendChild(this.pagingLi);
            }
        }
        this.container.appendChild(this.pagingUl);
        document.body.appendChild(this.container);
    },
    apply_log: function () {
        this.pagingLi = document.createElement('li');
        this.pagingLi.className = 'pagingLi';
        this.pagingLi.style.textAlign = 'center';
        this.pagingLi.style.lineHeight = '30px';
        this.pagingLi.style.border = '1px solid #000';
        this.pagingLi.style.cursor = 'pointer';
        this.pagingLi.style.width = '20px';
        this.pagingLi.style.marginLeft = '10px';
        this.pagingLi.style.display = 'inline-block';
    }
};
new Paging(9 ,5);
new Paging(4 ,2);

